<template>
	<section>
		<template v-if="!isSuccess">
			<a-form :form="form" style="margin-bottom: 50px;">
				<a-card title="填写服务商基本信息">
					<a-row :gutter="[24,0]">
						<a-col :span="8">
							<a-form-item class="mb-15" label="服务商简称">
								<a-input placeholder="请输入服务商简称" v-decorator="[
              'name',
              {rules: [{required: true,message: '请输入服务商简称',whitespace: true}]}
            ]" maxLength="16"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="公司全称">
								<a-input placeholder="请输入公司全称" v-decorator="[
              'fullName',
              {rules: [{required: true,whitespace: true,message: '请输入公司全称'}]}
            ]" maxLength="64"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="联系人姓名">
								<a-input placeholder="请输入联系人姓名" v-decorator="[
              'contactName',
              {rules: [{required: true,whitespace: true,message: '请输入联系人姓名'}]}
            ]" maxLength="16"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24,0]">
						<a-col :span="8">
							<a-form-item class="mb-15" label="联系电话">
								<a-input placeholder="请输入联系电话" v-decorator="[
              'contactPhone',
              {rules: [{required: true,message: '请输入联系电话',whitespace: true,validator: $utils.phoneValidator}]}
            ]" maxLength="16"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="联系邮箱">
								<a-input placeholder="请输入联系邮箱" v-decorator="[
              'contactEmail',
              {rules: [{whitespace: true,type: 'email',message: '请输入联系邮箱'}]}
            ]" maxLength="64"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="企业社会统一信用代码:">
								<a-input placeholder="请输入企业社会统一信用代码" v-decorator="[
						  'taxNum',
						  {rules: [{whitespace: false,message: '请输入企业社会统一信用代码'}]}
						]" maxLength="64"></a-input>
							</a-form-item>
						</a-col>
						<!-- <a-col :span="8">
							<a-form-item class="mb-15" label="法人姓名:">
								<a-input placeholder="请输入法人姓名" v-decorator="[
						  'legalPersonName',
						  {rules: [{whitespace: false,message: '请输入法人姓名'}]}
						]" maxLength="64"></a-input>
							</a-form-item>
						</a-col> -->
					<!-- 	<a-col :span="8">
							<a-form-item class="mb-15" label="法人姓名:">
								<a-input placeholder="请输入法人姓名" v-decorator="[
						  'legalPersonName',
						  {rules: [{whitespace: false,message: '请输入法人姓名'}]}
						]" maxLength="64"></a-input>
							</a-form-item>
						</a-col> -->
					</a-row>
					<a-row :gutter="[24,0]">
						<a-col :span="8">
								<a-form-item class="mb-15" label="法人姓名:">
									<a-input placeholder="请输入法人姓名" v-decorator="[
							  'legalPersonName',
							  {rules: [{whitespace: false,message: '请输入法人姓名'}]}
							]" maxLength="64"></a-input>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item class="mb-15" label="法人身份证号:">
									<a-input placeholder="请输入法人身份证号" v-decorator="[
							  'legalPersonIdNum',
							  {rules: [{whitespace: false,message: '请输入法人身份证号'}]}
							]" maxLength="64"></a-input>
								</a-form-item>
							</a-col>
						
					</a-row>
				</a-card>
				<a-card title="填写服务商主体信息" class="mt-24">
					<a-row :gutter="[24,0]">
						<a-col :span="16">
							<a-form-item class="mb-15" label="详细地址" style="position:relative;">
								<a-tooltip placement="top" title="请点击选择地址">
									<section class="flex" @click="setMapPoint({...addressPoint,type:1})">
										<a-input class="address-details" disabled placeholder="请点击选择地址" v-decorator="[
              'address',
              {rules: [{required: true,message: '请点击选择地址',whitespace: true}]}
            ]" maxLength="340"></a-input>
										<img class="pin cursor-pointer pin-img" :src="pin">
									</section>
								</a-tooltip>
								<section class="hint">（请点击选择地址）</section>
							</a-form-item>
							<a-form-item class="mb-15 photo" label="营业执照与其他资料">
								<span class="num">{{ fileList.length }}/10</span>
								<multipleShowList style="margin-left:0px;" ref="fileList" :scene="6" :fileLength="10"
									@uploadSuccess="uploadAvatarSuccess" @removeFile="removeFile" />
								<a-input type="hidden"
									v-decorator="['fileList',{rules: [{required: true,message: '请输入营业执照与其他资料'}]}]" />
							</a-form-item>
							<a-form-item>
								<p style="color:rgba(0, 0, 0, 0.85)">
									门店资料与公司主体一致
									<a-tooltip placement="top" title="是否使用与公司相同的地址、城市、联系人及营业资料">
										<a-icon type="info-circle" />
									</a-tooltip>
									<a-switch style="margin-left: 10px;" checked-children="是" un-checked-children="否"
										default-checked v-decorator="['isSameOfBase']" @change="sameOfBaseChange" />
								</p>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="服务商Logo">
								<Upload @uploadSuccess="uploadAvatarSuccesss" :scene="6">
									<section class="inline-flex flex-col items-center">
										<a-avatar class="mb-16" :size="200"
											:src="form.getFieldValue('logoUrl') || '/avatar.png'" />
										<a-button icon="upload">上传头像</a-button>
									</section>
								</Upload>
								<a-input type="hidden" v-decorator="['logoUrl', {initialValue:''}]" />
								<a-input type="hidden" v-decorator="['thumbnailPath', {initialValue: ''}]" />
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24,0]">
						<a-col :span="8">
							<a-form-item class="mb-15" label="门店名称">
								<a-input placeholder="请输入门店名称" v-decorator="[
              'storeName',
              {rules: [{required: true,message: '请输入门店名称',whitespace: true}]}
            ]" maxLength="60"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="所在城市">
								<!--                <a-cascader-->
								<!--                  class="w-full"-->
								<!--                  placeholder="请选择所在城市"-->
								<!--                  :options="cityList"-->
								<!--                  @change="cascaderChange"-->
								<!--                  v-decorator="[-->
								<!--                  'storeCityId',-->
								<!--                  {rules: [{required: true, message: '请选择所在城市'}]}-->
								<!--                ]"-->
								<!--                >-->
								<!--                </a-cascader>-->
								<SelectCity class="w-full" placeholder="请选择城市" :options="{allowClear: true}"
									:cityKey="'code'" v-decorator="[
										'cityCode',
										{rules: [{required: true,message: '请选择所在城市'}]}
									]" @change="cityChange" />
							</a-form-item>
						</a-col>
						<a-col :span="8" v-if="!isSameOfBase">
							<a-form-item class="mb-15" label="门店联系人">
								<a-input placeholder="请输入门店联系人" v-decorator="[
              'storeContactName',
              {rules: [{required: true,whitespace: true,message: '请输入门店联系人'}]}
            ]" maxLength="16"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24,0]">
						<a-col :span="8" v-if="!isSameOfBase">
							<a-form-item class="mb-15" label="联系方式">
								<section class="flex">
									<a-input placeholder="请输入联系方式" v-decorator="[
              'storeContactPhone',
              {rules: [{required: true,whitespace: true,message: '请输入联系方式',validator: $utils.phoneValidator}]}
            ]" maxLength="64"></a-input>
									<a-tooltip placement="top" :title="`联系方式可以输入多个，用逗号隔开`">
										<a-icon class="mt-10 ml-5 warning-color" type="exclamation-circle" />
									</a-tooltip>
								</section>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item class="mb-15" label="门店联系人手机号">
								<a-input placeholder="请输入门店联系人手机号" v-decorator="[
              'storeContactPhoneNumber',
              {rules: [{required: true,whitespace: true,message: '请输入门店联系人手机号',validator:$utils.purePhoneValidator}]}
            ]" maxLength="20"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="8" v-if="!isSameOfBase">
							<a-form-item class="mb-15" label="门店详细地址">
								<a-tooltip placement="top" title="点击选择地址">
									<section class="flex" @click="setMapPoint({...storeAddressPoint,type:2})">
										<a-input disabled placeholder="请选择门店详细地址" v-decorator="[
              'storeAddress',
              {rules: [{required: true,whitespace: true,message: '请选择门店详细地址'}]}
            ]" maxLength="256"></a-input>
										<img class="pin cursor-pointer" :src="pin">
									</section>
								</a-tooltip>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24,0]" v-if="!isSameOfBase">
						<a-col :span="24">
							<a-form-item class="mb-15 photo" label="门店营业执照与其他资料">
								<span class="num" style="left: 180px;">{{ businessList.length }}/10</span>
								<multipleShowList style="margin-left:0px;" ref="businessList" :scene="7"
									:fileLength="10" @uploadSuccess="businessSuccesss"
									@removeFile="businessRemoveFile" />
								<a-input type="hidden"
									v-decorator="['businessList',{rules: [{required: true,message: '请输入门店营业执照与其他资料'}]}]" />
							</a-form-item>
						</a-col>
					</a-row>
				</a-card>
				<a-card class="mt-24">
					<template #title>
						填写超级管理员信息
						<a-tooltip placement="top" title="超级管理员将拥有全部的权限，入驻成功后，登录信息将发送给指定联系方式">
							<a-icon type="info-circle" />
						</a-tooltip>
					</template>
					<a-row :gutter="[24,0]">
						<a-col :span="12">
							<a-form-item class="mb-15 photo" label="超管用户名">
								<a-input placeholder="请输入超管用户名" v-decorator="[
              'storeAdminAccount',
              {rules: [{required: true,whitespace: true,message: '请输入超管用户名'}]}
            ]" maxLength="16"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15 photo" label="初始密码">
								<a-input-password type="password" placeholder="请输入初始密码" v-decorator="[
              'storeAdminPwd',
              {rules: [{whitespace: true,validator: passwordValidator}]}
            ]" maxLength="100"></a-input-password>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24,0]">
						<a-col :span="12">
							<a-form-item class="mb-15 photo" label="联系方式">
								<a-input placeholder="请输入联系方式" v-decorator="[
              'storeAdminPhone',
              {rules: [{required: true,whitespace: true,message: '请输入联系方式',validator: $utils.phoneValidator}]}
            ]" maxLength="20"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15 photo" label="联系邮箱">
								<a-input placeholder="请输入联系邮箱" v-decorator="[
              'storeAdminEmail',
              {rules: [{whitespace: true,type: 'email',message: '请输入联系邮箱'}]}
            ]" maxLength="64"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
				</a-card>
				<section class="detail-footer">
					<a-button class="mr-10" @click="$router.back()">取消</a-button>
					<a-button type="primary" @click="confirmOk()">提交</a-button>
				</section>
				<AddressComponent :city="city" ref="AddressComponent" @uploadPoint="uploadPoint"></AddressComponent>
			</a-form>
		</template>
		<a-card v-else :bordered="false">
			<a-result status="success" title="服务商入驻成功" :sub-title="`“${name}”入驻成功，平台将会把成功入驻提示与账号信息发送至服务商联系人`">
				<template #extra>
					<a-button type="primary" @click="reset()">
						继续入驻其他服务商
					</a-button>
					<a-button style="margin-left: 8px"
						@click="$router.push({path:`/supplier-management-details/${id}`})">
						管理该服务商
					</a-button>
				</template>
			</a-result>
		</a-card>
	</section>
</template>

<script>
	import multipleShowList from '@/components/Upload/multipleShowList'
	import AddressComponent from './AddressComponent'
	import Upload from '@/components/Upload'
	import {
		vendorSettled
	} from '@/api/vendor'
	import {
		getAllProvinces
	} from '@/api/geography'

	export default {
		name: 'EnterSupplier',
		components: {
			multipleShowList,
			Upload,
			AddressComponent
		},
		data() {
			return {
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				showModal: false,
				confirmLoading: false,
				form: this.$form.createForm(this),
				fileList: [],
				cityList: [],
				cityId: null,
				city: null,
				pin: require('@/assets/icons/pin.png'),
				addressPoint: null,
				storeAddressPoint: null,
				businessList: [], //门店营业执照
				isSuccess: false, //是否成功
				isSameOfBase: true,
				name: null,
				id: null
			}
		},
		created() {
			this.allProvinces()
		},
		methods: {
			cityChange(cityObj) {
				this.city = cityObj ? cityObj.name : undefined
				this.cityId = cityObj ? cityObj.id : cityObj
			},
			sameOfBaseChange(e) {
				this.isSameOfBase = e
			},
			reset() {
				this.id = null
				this.name = null
				this.cityId = null
				this.addressPoint = null
				this.storeAddressPoint = null
				this.businessList = [] //门店营业执照
				this.fileList = []
				// this.$refs.businessList.setFileList([])
				// this.$refs.fileList.setFileList([])
				this.isSuccess = false
			},
			uploadPoint(data) {
				if (data.type === 2) {
					this.storeAddressPoint = data
					this.form.setFieldsValue({
						storeAddress: data.address
					})
				} else {
					this.addressPoint = data
					this.form.setFieldsValue({
						address: data.address
					})
				}
			},
			setMapPoint(data) {
				if (data.type === 2 && !this.form.getFieldValue('cityCode')) return this.$message.warning('请先选择所在城市')
				this.$refs.AddressComponent.getAddressValue(data)
			},
			cascaderChange(val, options) {
				this.cityId = options[1].id
			},
			allProvinces() {
				getAllProvinces().then(data => {
					data.forEach(item => {
						item.label = item.name
						item.value = item.code
						item.id = item.id
						item.children = item.cities.map(e => ({
							label: e.name,
							value: e.code,
							id: e.id
						}))
					})
					this.cityList = data
				})
			},
			uploadAvatarSuccesss({
				path,
				thumbnailPath
			}) {
				this.form.setFieldsValue({
					logoUrl: path,
					thumbnailPath
				})
			},
			storeAdminAccount(rule, value, callback) {
				if (!value || !value.match(/^.{2,16}$/)) return callback('超管用户名长度2-16')
				callback()
			},
			passwordValidator(rule, value, callback) {
				let count = 0
				if (!value) return callback('请输入初始密码')
				if (!value.match(/^.{6,16}$/)) return callback('密码长度6-16,至少含有数字/字母/特殊字符的任意两种,不能含有空格')
				if (value.match(/\s/)) return callback('密码长度6-16,至少含有数字/字母/特殊字符的任意两种,不能含有空格')
				if (value.match(/\d/)) {
					count++
				}
				if (value.match(/[a-zA-Z]/)) {
					count++
				}
				if (value.match(/[^\da-zA-Z^\s]/)) {
					count++
				}
				if (count >= 2) return callback()
				callback('密码长度6-16,至少含有数字/字母/特殊字符的任意两种,不能含有空格')
			},
			removeFile(data) {
				this.fileList.splice(this.fileList.findIndex(item => item.uid === data.uid), 1)
			},
			uploadAvatarSuccess(data) {
				this.fileList = data
				this.form.setFieldsValue({
					'fileList': data
				})
			},
			//营业执照移除
			businessRemoveFile(data) {
				this.businessList.splice(this.businessList.findIndex(item => item.uid === data.uid), 1)
			},
			//营业执照
			businessSuccesss(data) {
				this.businessList = data
				this.form.setFieldsValue({
					'businessList': data
				})
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						//营业执照与其他资料，多个逗号分隔
						const imgUrl = this.fileList.map(item => item.url)
						if (!imgUrl.length) return this.$message.warning('请上传营业执照与其他资料')
						//门店营业执照与其他资料，多个逗号分
						const storeImgUrl = this.businessList.map(item => item.url)
						const {
							isSameOfBase
						} = this
						if (!isSameOfBase && !storeImgUrl.length) return this.$message.warning('请上传门店营业执照与其他资料')
						//头像
						if (!values.logoUrl) return this.$message.warning('请上传服务商Logo')
						let storeLongitude, storeLatitude
						if (!isSameOfBase) {
							const {
								longitude,
								latitude
							} = this.storeAddressPoint
							storeLongitude = longitude
							storeLatitude = latitude
						}
						const {
							longitude,
							latitude
						} = this.addressPoint
						vendorSettled({
							...values,
							storeCityId: this.cityId,
							storeImgUrl: storeImgUrl.join(','),
							imgUrl: imgUrl.join(','),
							isSameOfBase: this.isSameOfBase,
							storeLongitude,
							storeLatitude,
							longitude,
							latitude
						}).then(res => {
							this.form.resetFields()
							this.name = values.name
							this.isSuccess = true
							this.id = res
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
	}

	.photo {
		position: relative;

		.num {
			position: absolute;
			top: -39px;
			font-size: 14px;
			font-weight: bold;
			left: 152px;
			color: #999;
		}
	}

	.pin {
		margin: -10px 0 0 5px;
		display: block;
		width: 45px;
		vertical-align: middle;
	}

	.address-details {
		max-width: 70%;
		vertical-align: middle;
	}

	.hint {
		position: absolute;
		top: -40px;
		left: 68px;
		display: block;
		width: 160px;
		color: #999;
	}
</style>